import React from 'react'
import {useLocation} from "react-router-dom"
import { Flex, Image } from 'react-vant'
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action/index"
function Detail() {
  let dispatch = useDispatch()
  let location = useLocation()
  
  let addShop = ()=>{
    console.log(location.state);
    dispatch(action.addshop(location.state))
  }
  return (
    <div>
       <Image
        width='100%'
        height='auto'
        lazyload
        src={location.state.img}
        errorIcon={<div style={{ fontSize: 14 }}>加载失败</div>}
      />
      <div className='detal-wrap'>
          <h4>商品名:{location.state.tit}</h4>
          <h4>价格：{location.state.price}</h4>
      </div>
        <h4>商品描述：{location.state.desc}</h4>
        <div className='demo-action-bar'>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() => console.log('cart click')}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='加入购物车'
          onClick={addShop}
        />
      </ActionBar>
    </div>
    </div>
    
   
  )
}

export default Detail